<template>
	<div class="p-0" style="margin-top: 20px">
		<!-- 桌面布局 -->
		<div class="hidden md:flex flex-col items-center space-y-8">
			<div class="w-full relative rounded-lg">
				<!-- 背景图片 -->
				<base-image
					:src="'activity/reward/vip-banner.png'"
					class="inset-0 w-full h-[360px] rounded-lg" />
				<div class="z-10 text-white bottom-[32px] abs-flex-center flex w-3/4">
					<base-image src="activity/reward/bird.svg" />
					<div class="ml-[20px]">
						<h2 class="font-bold text-3xl">{{ $t('title') }}</h2>
						<div class="mt-2">
							<div>
								{{ $t('banner.prefix') }}
								<span style="color: #00bd79">75%</span>
								{{ $t('banner.middle') }}
								<span style="color: #00bd79">{{ $t('banner.highlight') }}</span>
								{{ $t('banner.suffix') }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="p-0 bg-gray-800" style="border-radius: 10px">
				<div class="flex justify-center items-center h-[60px] text-2xl">
					{{ $t('howToJoin') }}
				</div>
				<!-- 步骤部分 -->
				<div class="w-full flex justify-between p-4 space-x-4">
					<!-- 步骤 1 -->
					<div class="flex-1 rounded-lg text-left">
						<base-image :src="'activity/reward/register-icon.png'" class="w-full h-[140px]" />
						<div class="p-2">
							<h3 class="text-white text-md">{{ $t('step1.title') }}</h3>
							<div class="text-white mt-1 text-sm">
								<div>
									<span style="color: gold">{{ $t('step1.highlight') }}</span>
									{{ $t('step1.suffix') }}
								</div>
							</div>
						</div>
					</div>

					<!-- 步骤 2 -->
					<div class="flex-1 rounded-lg text-left">
						<base-image :src="'activity/reward/xp-icon.png'" class="w-full h-[140px]" />
						<div class="p-2">
							<h3 class="text-white text-md">{{ $t('step2.title') }}</h3>
							<div class="text-white mt-1 text-sm">
								<div>
									{{ $t('step2.prefix') }}
									<span style="color: gold">{{ $t('step2.highlight1') }}</span>
									{{ $t('step2.middle') }}
									<span style="color: gold">{{ $t('step2.highlight2') }}</span>
								</div>
							</div>
						</div>
					</div>

					<div class="flex-1 rounded-lg text-left">
						<base-image :src="'activity/reward/reward-icon.png'" class="w-full h-[140px]" />
						<div class="p-2">
							<h3 class="text-white text-md">{{ $t('step3.title') }}</h3>
							<div class="text-white mt-1 text-sm">
								<div>
									<span style="color: gold">{{ $t('step3.highlight1') }}</span>
									{{ $t('step3.middle') }}
									<span style="color: gold">{{ $t('step3.highlight2') }}</span>
									{{ $t('step3.suffix') }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 移动布局 -->
		<div class="md:hidden flex flex-col items-center space-y-4">
			<div class="w-full relative rounded-lg">
				<!-- 背景图片 -->
				<base-image
					:src="'activity/reward/vip-banner.png'"
					class="inset-0 w-full h-[130px] rounded-lg" />
				<div class="h-[80px]"></div>
				<div class="z-10 text-white bottom-[10px] abs-flex-center flex" style="width: 90%">
					<base-image src="activity/reward/bird.svg" style="width: 70px" />
					<div class="ml-[10px]">
						<h2 class="font-bold">{{ $t('title') }}</h2>
						<div class="mt-2">
							<div>
								{{ $t('banner.prefix') }}
								<span style="color: gold">75%</span>
								{{ $t('banner.middle') }}
								<span style="color: gold">{{ $t('banner.highlight') }}</span>
								{{ $t('banner.suffix') }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="background: #1b2538">
				<div class="flex justify-center items-center h-[60px] text-2xl">
					{{ $t('howToJoin') }}
				</div>
				<div class="w-full relative p-4 rounded-lg">
					<base-image
						:src="'activity/reward/register-icon.png'"
						class="inset-0 w-full h-full rounded-lg" />
					<div class="z-10 text-white">
						<h3 class="text-md font-semibold">{{ $t('step1.title') }}</h3>
						<div class="mt-1">
							<div>
								<span style="color: gold">{{ $t('step1.highlight') }}</span>
								{{ $t('step1.suffix') }}
							</div>
						</div>
					</div>
				</div>
				<div class="w-full relative p-4 rounded-lg">
					<base-image
						:src="'activity/reward/xp-icon.png'"
						class="inset-0 w-full h-full rounded-lg" />
					<div class="z-10 text-white">
						<h3 class="text-md font-semibold">{{ $t('step2.title') }}</h3>
						<div class="mt-1">
							<div>
								{{ $t('step2.prefix') }}
								<span style="color: gold">{{ $t('step2.highlight1') }}</span>
								{{ $t('step2.middle') }}
								<span style="color: gold">{{ $t('step2.highlight2') }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="w-full relative p-4 rounded-lg">
					<base-image
						:src="'activity/reward/reward-icon.png'"
						class="inset-0 w-full h-full rounded-lg" />
					<div class="z-10 text-white">
						<h3 class="text-md font-semibold">{{ $t('step3.title') }}</h3>
						<div class="mt-1">
							<div>
								<span style="color: gold">{{ $t('step3.highlight1') }}</span>
								{{ $t('step3.middle') }}
								<span style="color: gold">{{ $t('step3.highlight2') }}</span>
								{{ $t('step3.suffix') }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage } from '@/components/base'
</script>

<style scoped>
.abs-flex-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* 其他样式 */
}
</style>
